<template>
  <a-drawer
      title="评估详情"
      placement="right"
      width="800"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose">
    <a-spin :spinning="loading">
      <a-form-model layout="inline" ref="dataForm" v-model="dataForm">
        <h2>{{ dataForm.questionTopic }}</h2>
        <a-row>
          <a-col :md="6" :sm="8">
            <a-form-model-item label="被评人部门">
              {{ dataForm.assessedDept }}
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-model-item label="被评人姓名">
              {{ dataForm.assessedName }}
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-model-item label="评估人与被评人关系">
              {{ dataForm.appraiseTies }}
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-model-item label="提交时间">
              {{ dataForm.appraiseTime }}
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row v-for="(item, index) in dataForm.assessList" :key="item.id"
               style="padding: 20px; margin-bottom: 10px; background-color: #F8F8F8">
          <h3>{{ (index + 1) + '. ' + item.assessDetail }}</h3>
          <div>
            得分:
            <div style="display: inline-block; margin: 0 10px;"
                 v-for="(o, i) in item.scoreValue.split(',')" :key="i">
              {{ o }}
            </div>
          </div>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-drawer>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: "assessment-details",
  data () {
    return {
      visible: false,
      loading: false,
      queryParam: {
        appraiserPhone: '',
        assessedId: '',
        questionId: '',
      },
      dataForm: {
        // name: '2022年互评问卷',
        // dept: '县正级',
        // username: '张三',
        // relations: '直接上级',
        // completeTime: '2022-12-21 00:00:00',
        // detailList: [
        //   {
        //     id: '1',
        //     title: '工作积极主动，敢于承担责任，接受挑战，深入基层',
        //     options: [
        //       { index: 1, key: '10分' },
        //       { index: 2, key: '9分' },
        //       { index: 3, key: '8分' },
        //       { index: 4, key: '7分' },
        //       { index: 5, key: '6分' },
        //       { index: 6, key: '5分' },
        //       { index: 7, key: '4分' },
        //       { index: 8, key: '3分' },
        //       { index: 9, key: '2分' },
        //       { index: 10, key: '1分' },
        //     ]
        //   },
        //   {
        //     id: '2',
        //     title: '工作积极主动，敢于承担责任，接受挑战，深入基层',
        //     options: [
        //       { index: 1, key: '10分' },
        //       { index: 2, key: '9分' },
        //       { index: 3, key: '8分' },
        //       { index: 4, key: '7分' },
        //       { index: 5, key: '6分' },
        //       { index: 6, key: '5分' },
        //       { index: 7, key: '4分' },
        //       { index: 8, key: '3分' },
        //       { index: 9, key: '2分' },
        //       { index: 10, key: '1分' },
        //     ]
        //   }
        // ]
      },
      url: {
        getInfo: '/appraise/getAppraiseDetail'
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        if (this.queryParam.appraiserPhone && this.queryParam.assessedId && this.queryParam.questionId) {
          this.loading = true
          Promise.all([
            this.getInfo(),
          ]).then(() => {
            console.log('this.dataForm', this.dataForm)
            this.loading = false
          }).catch(res => {
            console.log('res', res)
            this.visible = false
            this.loading = false
          })
        }
      })
    },
    getInfo() {
      return new Promise((resolve, reject) => {
        getAction(this.url.getInfo, this.queryParam).then(res => {
          if (!res.success) {
            return this.$message.error({
              content: res.message,
              onClose: () => reject()
            })
          }
          this.dataForm = res.result
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    afterVisibleChange (val) {
    },
    onClose () {
      this.visible = false
    },
  }
}
</script>

<style scoped>

</style>
